<template>
  <!--  -->
  <view class="checkSeat">
    <view class="img">
      <image
        class="swiperImg"
        :src="seatImg"
        mode="aspectFit"
        show-menu-by-longpress
        @tap="dblclick(seatImg)"
      />
    </view>
    <view class="textWrap">
      注：此图片为真实座位分布图，可双击放大查看
    </view>
    <view class="btnWrap">
      <button type="default" class="btn" @click="goto">取消</button>
      <button type="primary" class="btn" @click="gotoNext">下一步</button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      routerParams: {},
      seatImg: "/static/seat.jpg",
      touchStartTime: 0, // 触摸开始时间   用来判断是否是双击
    };
  },
  onLoad(option) {
    this.routerParams = { ...option };
  },
  methods: {
    gotoNext(url) {
      uni.navigateTo({
        url: `/pages/choose/index?phone=${this.routerParams?.phone ?? null}&buyNum=${this.routerParams?.buyNum ?? null}&customerId=${
          this.routerParams?.customerId ?? null
        }`, //跳转地址
      });
    },
    goto() {
      uni.navigateTo({ url: "/" });
    },
    dblclick: function (url) {
      if (this.touchStartTime == 0) {
        this.touchStartTime = new Date().getTime();
      } else {
        if (new Date().getTime() - this.touchStartTime <= 300) {
          // this.setMeau = true;
          // console.log("这是双击");
          this.preViewImg(url);
        }
        this.touchStartTime = 0;
      }
    },
    preViewImg(url) {
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log('data', data);
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.checkSeat {
  width: 100%;
  height: 100%;
  .img {
    margin-top: 5px;
    width: 100%;
    height: 300px;
    .swiperImg {
      width: 100%;
      height: 100%;
    }
  }
  .textWrap {
    margin-top: 5px;
    font-size: 14px;
    color: #888;
    padding: 0 20px;
  }
  .btnWrap {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn {
      width: 40%;
    }
  }
}
</style>